<template>
  <div>
    <!-- 组件访问store中的数据： -->
    <!-- 第1种方式：this.$store.state.变量名称 -->
    <!-- 注：在 template 中，this 可以省略 -->
    <!-- <h3>当前最新的count值为：{{ $store.state.count }}</h3> -->

    <!-- store 中 getter 值的访问: -->
    <!-- 第一种方式: this.$store.getters.变量名称  -->
    <h3>{{ $store.getters.showNum }}</h3>
    <button @click="btnHandler1">+1</button>
    <button @click="btnHandler2">+N</button>
    <button @click="btnHandler3">+1 Async</button>
    <button @click="btnHandler4">+N Async</button>
  </div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  data() {
    return {}
  },
  methods: {
    ...mapActions(['addAsync', 'addNAsync']),
    // 触发 mutation
    btnHandler1() {
      // 在组件中修改store数据，这种方式不推荐
      // this.$store.state.count++

      // 触发 mutation 的第一种方式
      // 推荐使用mutation方式更新数据
      this.$store.commit('add')
    },
    btnHandler2() {
      // 触发 mutation 函数传递第二个参数
      this.$store.commit('addN', 3)
    },
    btnHandler3() {
      // 触发 action 中的异步函数
      // 第一种方式: dispatch
      this.$store.dispatch('addAsync')
      // 带参数
      // this.$store.dispatch('addNAsync', 20)
    },
    btnHandler4() {
      // 第一种方式: 通过 mapActions 函数
      this.addNAsync(10)
    }
  }
}
</script>
